<template>
	<view class="pages">
		<view class="mar-10 border-rad-3 border-type-1">
			<view
				v-for="(item, index) in tableData"
				:key="index"
				class="flex align-center"
				:style="{
					borderBottom: index !== tableData.length -1 ? '1px #e6e6e6 solid' : 'none',
				}"
			>
				<view class="flex align-center w-px-120 pad-x-10" style="min-height: 26px;">
					<text class="color-ff0000 mar-r-5">*</text>
					<text>{{ item.DESCR }}</text>
				</view>
				
				<view
					class="flex flex-1 align-center"
					:style="{
						borderLeft: '1px #e6e6e6 solid',
						minHeight: '26px',
						padding: item.TYPE !== 'textarea' ? '10px 10px' : '10px 0px',
					}"
				>
					<text v-if="item.TYPE === 'disabled'" class="color-333333">{{ item.DESCR_CVAL }}</text>
					
					<view v-else-if="item.TYPE === 'input'">
						<view
							v-if="item.DESCR === '车号'"
							class="flex align-center"
						>
							<input
								type="text"
								v-model="item.DESCR_CVAL"
								:placeholder="item.placeholder"
								style="color: #333333;"
								@blur="handleBlur($event, item)"
							/>
							
							<view class="w-px-80 mar-l-10">
								<u-button type="primary" color="#bd3124" @click="handleSearch()">查询</u-button>
							</view>
						</view>
						
						<input
							v-else
							type="text"
							v-model="item.DESCR_CVAL"
							:placeholder="item.placeholder"
							style="color: #333333; height: 30px;"
						/>
					</view>
					
					<view v-else-if="item.TYPE === 'textarea'" class="w-100">
						<textarea
							v-model="item.DESCR_CVAL"
							:placeholder="item.placeholder"
							auto-height
							style="width: auto; color: #333333; margin: 10px; height: 30px;"
						></textarea>
					</view>
					
					<view
						v-if="item.TYPE === 'radio' && item.DESCR === '是否需要更换'"
						class="flex align-center"
					>
						<u-radio-group
						    v-model="item.DESCR_CVAL"
						    placement="row"
							:disabled="!item.isEdit"
						>
							<u-radio
								:customStyle="{ marginRight: '15px' }"
								v-for="(item, index) in radios"
								:key="index"
								:label="item.label"
								:name="item.name"
							>
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
		
		<view class="pos-f" style="left: 10px; right: 10px; bottom: 10px;">
			<u-button type="primary" @click="handleSubmit()">提 交</u-button>
		</view>
	</view>
</template>

<script>
	import Utils from '@/utils/utils'
	import { mapState } from 'vuex'
	import { convertLetterCase } from '@/utils/lib'
	import { getCartInfo } from '@/apis/applyTask'
	import { submitFeedback } from '@/apis/abnormalFeedback/index'
	
	export default {
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
			})
		},
		
		data() {
			return {
				tableData: [], // 表格数据
				radios: [
					{ label: '是', name: 1, checked: true },
					{ label: '否', name: 0, checked: false }
				],
			}
		},
		
		mounted() {
			this.findInfos()
		},
		
		methods: {
			// 根据车号查询异常反馈信息
			findInfos() {
				let data = [
					{
						DESCR: '车号',
						DESCR_CVAL: '',
						TYPE: 'input',
						placeholder: '请输入车号',
						isEdit: true,
					}, {
						DESCR: '反馈人',
						DESCR_CVAL: '',
						TYPE: 'input',
						placeholder: '请输入反馈人姓名',
						isEdit: false,
					}, {
						DESCR: '手机号码',
						DESCR_CVAL: '',
						TYPE: 'input',
						placeholder: '请输入手机号',
						isEdit: true,
					}, {
						DESCR: '客户单位',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入客户单位',
						isEdit: true,
					}, {
						DESCR: '异常情况说明',
						DESCR_CVAL: '',
						TYPE: 'textarea',
						placeholder: '请输入异常情况说明',
						isEdit: true,
					}, {
						DESCR: '是否需要更换',
						DESCR_CVAL: 1,
						TYPE: 'radio',
						placeholder: '',
						isEdit: true,
					}
				]
				
				this.tableData = data
			},
			
			// 查询
			handleSearch() {
				let cartNum = this.tableData[0].DESCR_CVAL
				
				if (!cartNum) {
					Utils.popUpMsg('none', '车号不得为空！', 1000)
					return
				}
				
				let token = this.token
				let location = this.longitude + ',' + this.latitude
				
				Utils.loading('查询中...')
				
				getCartInfo(cartNum, token, location).then(res => {
					uni.hideLoading()
					let result = res.Result
					
					this.tableData[1].DESCR_CVAL = result.LinkMan
					this.tableData[2].DESCR_CVAL = result.Mobile
					this.tableData[3].DESCR_CVAL = result.CName
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
			// 鼠标离开车号时的回调
			handleBlur(e, row) {
				row.DESCR_CVAL = convertLetterCase(e.target.value)
			},
			
			// 提交数据
			handleSubmit() {
				let cartNum = this.tableData[0].DESCR_CVAL
				let name = this.tableData[1].DESCR_CVAL
				let telephone = this.tableData[2].DESCR_CVAL
				let customer = this.tableData[3].DESCR_CVAL
				let desc = this.tableData[4].DESCR_CVAL
				let feedbackType = this.tableData[5].DESCR_CVAL
				let token = this.token
				let location = this.longitude + ',' + this.latitude
				
				if (!cartNum) {
					Utils.popUpMsg('none', '车号不得为空！', 1000)
					return
				}
				
				if (!name) {
					Utils.popUpMsg('none', '反馈人姓名不得为空！', 1000)
					return
				}
				
				if (!telephone) {
					Utils.popUpMsg('none', '手机号码不得为空！', 1000)
					return
				}
				
				if (!customer) {
					Utils.popUpMsg('none', '客户单位不得为空！', 1000)
					return
				}
				
				if (!desc) {
					Utils.popUpMsg('none', '异常情况说明不得为空！', 1000)
					return
				}
				
				let params = {
					vehicleNumber: cartNum,
					feedbackUserName: name,
					feedbackRealName: name,
					feedbackUserTel: telephone,
					cName: customer,
					feedbackDescription: desc,
					token,
					feedbackType
				}
				
				Utils.loading('正在提交反馈信息...')
				
				submitFeedback(params).then(res => {
					uni.hideLoading()
					Utils.popUpMsg('success', res.Message, 1000)
					this.handleReset()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			
			// 重置页面
			handleReset() {
				this.tableData[0].DESCR_CVAL = ''
				this.tableData[1].DESCR_CVAL = ''
				this.tableData[2].DESCR_CVAL = ''
				this.tableData[3].DESCR_CVAL = ''
				this.tableData[4].DESCR_CVAL = ''
				this.tableData[5].DESCR_CVAL = 1
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #fff;
	}
</style>

